<template>
  <div class="user-activity">
    <div class="main-header">
        <h2 class="main-title">用户活跃度</h2>
    </div>
    <div class="card-box">
       <div class="el-card" v-for="(card, index) in cards" :key="index">

         <div class="card-header">
         <div class="card-title">{{card.title}}</div>
           <div class="card-icon" >
             <el-icon><component :is="card.icon" /></el-icon>
           </div>
         </div>

         <div class="card-value">{{card.value}}</div>
         <div class="card-trend" :class="{
        'trend-up': card.trend?.direction === 'up',
        'trend-down': card.trend?.direction === 'down'
      }">
          <span v-if="card.trend" class="trend-icon">
            {{ trendIcon(card.trend.direction) }}
          </span>
           <span v-if="card.trend">
          {{ card.trend.percent }}% {{ card.trend.text }}
          </span>
           <span v-else class="card-extra">{{ card.extra }}</span>
         </div>


       </div>
    </div>

    <div class="chart-box">
      <!-- 左侧折线图 -->
      <div class="left-chart">
        <div class="chart-title">
          <h3>DAU/MAU 趋势</h3>
          <p>日活跃用户和月活跃用户变化趋势</p>
        </div>
        <v-chart class="chart" :option="trendchartOption" autoresize />
      </div>

      <!-- 右侧柱状图 -->
      <div class="right-chart">
        <div class="chart-title">
          <h3>使用时长分布</h3>
          <p>不同时段用户活跃度分布</p>
        </div>
        <v-chart class="chart" :option="timeDistributionOption" autoresize />
      </div>
    </div>

  </div>
</template>

<script setup>
import {User, Clock, Star, TrendCharts} from '@element-plus/icons-vue';
import VChart from "vue-echarts";

// echarts 核心模块
import * as echarts from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer,
]);


const cards = [
  {
    title: '今日活跃用户数',
    value: 1234,
    unit: '人',
    trend: { direction: 'up', percent: 5.4, text: '较昨日' },
    icon: User,

  },
  {
    title: '平均学习时长',
    value: 45,
    unit: 'min',
    trend: { direction: 'down', percent: 2.1, text: '较昨日' },
    icon: Clock,
  },
  {
    title: '问题解答数',
    value: 2340,
    unit: '',
    trend: { direction: 'up', percent: 8.3, text: '较昨日' },
    icon: TrendCharts,
  },
  {
    title: '学习满意度',
    value: '76%',
    unit: '',
    extra: '较上周 +3%',
    icon: Star,
  }
];
const trendIcon = (direction) => (direction === 'up' ? '+' : '-');

const trendchartOption = ref({})
const timeDistributionOption = ref({})

// 模拟数据函数
const ChartDate = () => {
  return {
    datas: ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"],
    dau: [1200, 1100, 1300, 1400, 1300, 1500, 1600],
    mau: [3800, 3900, 3950, 4000, 4050, 4100, 4200],
  };
};

// 初始化折线图
const inittrendChart = () => {
  const data = ChartDate();
  trendchartOption.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "cross" },
    },
    legend: {
      data: ["DAU", "MAU"],
      right: 10,
      top: 10,
      textStyle: { color: "#666" },
    },
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.datas,
      axisLine: { lineStyle: { color: "#e0e0e0" } },
      axisLabel: { color: "#666" },
    },
    yAxis: {
      type: "value",
      axisLine: { lineStyle: { color: "#e0e0e0" } },
      axisLabel: { color: "#666" },
      splitLine: { lineStyle: { type: "dashed", color: "#e0e0e0" } },
    },
    series: [
      {
        name: "DAU",
        type: "line",
        data: data.dau,
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        lineStyle: { color: "#5B8FF9", width: 2 },
        itemStyle: { color: "#5B8FF9" },
      },
      {
        name: "MAU",
        type: "line",
        data: data.mau,
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        lineStyle: { color: "#5AD8A6", width: 2 },
        itemStyle: { color: "#5AD8A6" },
      },
    ],
  };
};

// 初始化柱状图
const initTimeDistribution = () => {
  timeDistributionOption.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
      formatter: "{b}<br/>{a}: {c}",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "8%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["00:00", "06:00", "12:00", "18:00", "21:00", "23:00"],
      axisLine: { lineStyle: { color: "#e0e0e0" } },
      axisLabel: { color: "#666", interval: 0 },
      axisTick: { alignWithLabel: true },
    },
    yAxis: {
      type: "value",
      name: "",
      nameTextStyle: { color: "#666", fontSize: 12 },
      axisLine: { lineStyle: { color: "#e0e0e0" } },
      axisLabel: { color: "#666" },
      splitLine: { lineStyle: { type: "dashed", color: "#f0f0f0" } },
    },
    series: [
      {
        name: "",
        type: "bar",
        data: [100, 180, 450, 680, 500, 280],
        barWidth: "50%",
        itemStyle: {
          color: "#7C5CFF",
          borderRadius: [4, 4, 0, 0],
        },
        label: {
          show: true,
          position: "top",
          color: "#7C5CFF",
          fontWeight: "bold",
        },
        emphasis: { itemStyle: { color: "#5A3FD9" } },
      },
    ],
  };
};

onMounted(() => {
  inittrendChart();
  initTimeDistribution();
});

</script>

<style scoped>
.user-activity {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: 100vh;
}
.main-header {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}
.card-box
{
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距为20px */
  padding: 20px;
}

.el-card
{
  width: calc(25% - 15px); /*四张卡片在一起，间距为15px */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.2s ease; /* 动画过渡效果，使缩放更平滑 */
}
.el-card:hover
{
  transform: scale(1.05);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.card-icon {
  font-size: 20px;
  color: #999;
  display: flex;
  justify-content: flex-end;
}
.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}
.card-trend {
  font-size: 15px;
  color: #606266;
  margin-top: 4px;
}

.trend-up {
  color: #10b981;
  margin-right: 4px;
}

.trend-down {
  color: #ef4444;
  margin-right: 4px;
}

.card-extra {
  font-size: 15px;
  color: #999;
}

.chart-box {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.left-chart,
.right-chart {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chart-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}
.chart-title p {
  font-size: 14px;
  color: #999;
  margin: 0 0 20px 0;
}
.chart {
  width: 100%;
  height: 300px !important;
}
@media (max-width: 768px) {
  .card-box {
    flex-direction: column;
  }
  .el-card {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
